<template>
	<form class="mui-input-group">
		<div class="mui-input-row">
			<label class="tit">收件人</label>
			<input v-model="form.name" type="text" class="mui-input-clear" placeholder="请输入收件人姓名">
		</div>
		<div class="mui-input-row">
			<label class="tit">联系方式</label>
			<input v-model="form.tel" type="text" class="mui-input-clear" placeholder="请输入手机号">
		</div>
		<div class="mui-input-row">
			<label class="tit">所在地区</label>
			<input v-model="form.area" type="text" class="mui-input-clear" placeholder="所在地区" @click="choose">
			<div class="divwrap">
				<div class="mask" @click="choose" v-show="show"></div>
				<v-distpicker v-show="show" type="mobile" @province="onChangeProvince" @city="onChangeCity"
					@area="onChangeArea" :province="newInfo.province" :city="newInfo.city" :area="newInfo.district">
				</v-distpicker>
			</div>

		</div>
		<div class="mui-input-row">
			<label class="tit">详细地址</label>
			<input v-model="form.detail" type="text" class="mui-input-clear" placeholder="请输入详细地址">
		</div>
		<div class="mui-button-row">
			<button @click="save" type="button" class="mui-btn mui-btn-primary mui-btn-block">确认</button>
			<button v-show="id" @click="del" type="button" class="mui-btn mui-btn-danger mui-btn-block">删除</button>
		</div>
	</form>
</template>


<script>
	import VDistpicker from 'v-distpicker'
	export default {
		data() {
			return {
				form: {
					name: '',
					tel: '',
					area: '',
					detail: '',
					},
					show: false, // 是否显示遮罩层
					newInfo: {
						province: '', // 省
						city: '', // 市
						area: '', // 区
				}
			}
		},
		props: ['id'],
		created() {
			this.getAddress()
		},

		methods: {
			getAddress() {
				if (!this.id) {
					return
				}
				this.$indicator.open({
					text: '加载中'
				})
				var params = {
					id: this.id
				}
				this.$http.get('address/edit', {
					params: params
				}).then(res => {
					this.$indicator.close()
					if (res.data.code === 0) {
						this.$toast(res.data.msg)
					} else if (res.data.code === 1) {
						this.form = res.data.data
					} else if (res.data.code === 2) {
						this.$router.push({
							name: 'login'
						})
					}

				})
			},

			save() {
				this.$indicator.open({
					text: '提交中'
				})
				this.form.id = this.id
				this.$http.post('address/save', this.form).then(res => {
					this.$indicator.close()
					if (res.data.code === 0) {
						this.$toast(res.data.msg)
					} else if (res.data.code === 1) {
						this.$toast(res.data.msg)
						this.$router.go(-1)
					} else if (res.data.code === 2) {
						this.$router.push({
							name: 'login'
						})
					}
				})

			},

			choose() {
				this.show = !this.show
			},
			onChangeProvince(data) {
				this.newInfo.province = data.value
			},
			onChangeCity(data) {
				this.newInfo.city = data.value
			},
			onChangeArea(data) {
				this.newInfo.area = data.value
				this.form.area = this.newInfo.province + '-' + this.newInfo.city + '-' + this.newInfo.area
				this.show = false
			},
			del () {
			    this.$indicator.open({
			      text: '删除中'
			    })
			    this.form.id = this.id
			    this.$http.post('address/del', this.form).then(res => {
			      this.$indicator.close()
			      if (res.data.code === 0) {
			          this.$toast(res.data.msg)
			        } else if (res.data.code === 1) {
			          this.$toast(res.data.msg)
			          this.$router.go(-1)
			        } else if (res.data.code === 2) {
			          this.$router.push({ name: 'login' })
			        }

			    })
			  }


		},
		components: {
			'v-distpicker': VDistpicker
		}

	}
</script>

<style lang="scss" scoped>
	.mui-input-group .mui-button-row {
		height: auto;
	}

	.mui-input-clear {
		font-size: 14px;
	}

	.mui-input-group:before {
		list-style: none;
	}

	.mui-button-row {
		margin-top: 20px;

		button {
			margin: 20px 0;
			padding: 10px 0;
		}
	}

	.tit {
		color: #999;
	}

	input::-webkit-input-placeholder {
		color: #999;
	}

	input::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: #999;
	}

	input:-moz-placeholder {
		/* Mozilla Firefox 4 to 18 */
		color: #999;
	}

	input:-ms-input-placeholder {
		/* Internet Explorer 10-11 */
		color: #999;
	}

	.divwrap>.mask {
		background: #000;
		opacity: 0.3;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.divwrap>.distpicker-address-wrapper {
		color: #999;
		background: #fff;
		border-top: 1px solid #ccc;
		z-index: 1;
		height: 300px;
		overflow-y: auto;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}
</style>